<template>
    <div class="odds frame_content m10">
        <div class="wrap1">
            <div
                    v-for="(item, index) in quotaList[0]"
                    :key="index"
                    style="margin-bottom:10px"
                    class="common"
                    gameid="5"
            >
                <div class="tr" style="border-left: 1px solid #ddd;">
                    <div class="td">{{ item.lottert_name }}限额：</div>
                </div>
                <div v-for="(info, quota_index) in item.room_lottery_quota" :key="quota_index">
                    <div
                            class="tr"
                            style="border-left: 1px solid #ddd;border-top: 1px solid #ddd"
                    >
                        <div class="td tableleft" style="color:red">
                            {{ info.bet_sign }}
                        </div>
                    </div>
                    <div class="tr" style="height:47px">
                        <div class="width25">
                            <div class="td tableleft flo_left pad_bot">最小投注限额</div>
                            <div class="td flo_left">
                                <input class="flo_left" type="text" v-model="info.betUnitMin"/>
                            </div>
                        </div>
                        <div class="width25">
                            <div class="td tableleft flo_left pad_bot">个人最大投注</div>
                            <div class="td flo_left">
                                <input class="flo_left" type="text" v-model="info.betUnitMax"/>
                            </div>
                        </div>
                        <div class="width25">
                            <div class="td tableleft flo_left pad_bot">所有人最大投注</div>
                            <div class="td flo_left">
                                <input
                                        class="flo_left"
                                        type="text"
                                        v-model="info.betPeriodMax"
                                />
                            </div>
                        </div>
                        <div class="width25">
                            <div class="td tableleft flo_left pad_bot">网盘单手限额</div>
                            <div class="td flo_left">
                                <input class="flo_left" type="text" v-model="info.fDUnitMax"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="baoc tr">
                    <a href="javascript:void(0);" @click="save_quota(index)" class=" btn btn-info " >保存</a>
                </div>
            </div>
        </div>
        <div class="wrap1">
            <div
                    v-for="(item, index) in quotaList[1]"
                    :key="index"
                    style="margin-bottom:10px"
                    class="common"
                    gameid="5"
            >
                <div class="tr" style="border-left: 1px solid #ddd;">
                    <div class="td">{{ item.lottert_name }}赔率：</div>
                </div>
         <div v-for="(bet_sign, bet_sign_index) in item.bet_sign" :key="bet_sign_index">
                    <div
                         class="tr"
                         style="border-left: 1px solid #ddd;border-top: 1px solid #ddd"
                    >
                        <div class="td tableleft">
                            <span style="color:#0fe836">{{ bet_sign.bet_sign }}</span>
                            <span>(赔率格式为数字)</span>
                        </div>
                        </div>
                        <div v-for="(room_lottery_odds_list, room_lottery_odds_index) in bet_sign.room_lottery_odds"
                             :key="room_lottery_odds_list_index" class="tr" style="height:47px">
                            <div v-for="(room_lottery_odds, room_lottery_odds_index) in room_lottery_odds_list"
                                 :key="room_lottery_odds_index" class="width20">
                                <div class="td tableleft flo_left pad_bot">{{room_lottery_odds.bet_name}}</div>
                                <div class="td flo_left">
                                    <input class="flo_left" type="text" v-model="room_lottery_odds.bet_odds"/>
                                </div>
                            </div>
                        </div>
                    </div>

                <div class="baoc tr">
                    <a href="javascript:void(0);" class=" btn btn-info btn-opp saveOddsBtn" @click="save_odds(index)"
                    >保存</a
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { mapState, mapActions } from "vuex";
  import http from "@/utils/http";

  export default {
    data() {
      return {
        oddsList: [
          { id: 1, name: "重庆时时彩赔率" },
          { id: 2, name: "PK拾赔率" },
          { id: 3, name: "幸运飞艇赔率" },
          { id: 4, name: "极速赛车赔率" },
          { id: 5, name: "澳洲5赔率" },
          { id: 6, name: "澳洲10赔率" }
        ]
      };
    },
    computed: {
      ...mapState("odds", ["quotaList"])
    },
    methods: {
      ...mapActions("odds", ["getQuotaList"]),
      save_quota:function(id) {
        var quota = JSON.stringify(this.quotaList[0][id].room_lottery_quota);
        console.log(quota)
        http
          .post(
            "/api/rule/lottery/update_quotas?token=2Q3ntNqyo5eaLmXITABb",
            {
              quota: quota,
            }
          )
          .then(response => {
            console.log(response);
          });
      },
      save_odds:function(id) {
        var bet_signs = this.quotaList[1][id].bet_sign;
        console.log(bet_signs)
        var odds=[];
        for(var i in bet_signs){
          for(var k in bet_signs[i].room_lottery_odds){
            odds.push.apply(odds,bet_signs[i].room_lottery_odds[k]);
          }
        }
        console.log(odds)
        odds = JSON.stringify(odds);
        http
          .post(
            "/api/login/room_admin/info?token=2Q3ntNqyo5eaLmXITABb",
            {
              odds: odds,
            }
          )
          .then(response => {
            console.log(response);
          });
      }
    },
    created() {
      this.getQuotaList();
    }
  };
</script>

<style>
    .common {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px;
        line-height: 20px;
        color: #333;
        width: 96%;
        margin: auto;
        border: 1px solid #ddd;
        border-collapse: separate;
        border-left: 0;
    }

    .common td,
    .common th {
        padding-top: 8px;
        padding-bottom: 4px;
        line-height: 20px;
        border-left: 1px solid #ddd;
        padding: 8px;
        line-height: 20px;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }

    .common tbody tr:hover > td,
    .common tbody tr:hover > th {
        background-color: #f5f5f5;
    }

    .common tbody:first-child tr:first-child td {
        border-top: 0;
    }

    .tableleft {
        text-align: right;
        padding-left: 5px;
        background-color: #f5f5f5;
    }

    .btn-info {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: #49afcd;
        background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
        background-repeat: repeat-x;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .odds a {
        text-decoration: none;
    }

    .btn-info:hover,
    .btn-info:focus {
        text-decoration: none;
        background-position: 0 -15px;
        -webkit-transition: background-position 0.1s linear;
        -moz-transition: background-position 0.1s linear;
        -o-transition: background-position 0.1s linear;
        transition: background-position 0.1s linear;
        color: #fff;
        background-color: #2f96b4;
    }

    .btn-opp:hover,
    .btn-opp:focus {
        text-decoration: none;
        background-position: 0 -15px;
        -webkit-transition: background-position 0.1s linear;
        -moz-transition: background-position 0.1s linear;
        -o-transition: background-position 0.1s linear;
        transition: background-position 0.1s linear;
        color: #fff;
        background-color: #04c;
    }

    .saveOddsBtn {
        background-image: linear-gradient(to bottom, #08c, #04c);
        background-repeat: repeat-x;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

    .saveOddsBtn:hover {
        color: #fff;
        background-color: #04c;
    }

    .wrap2 {
        margin-top: 10px;
    }

    .wrap1 .th,
    .wrap1 .td {
        padding: 8px;
        line-height: 20px;
        text-align: left;
        vertical-align: top;
    }

    .wrap1 .flo_left {
        float: left;
    }

    .wrap1 .pad_bot {
        padding-bottom: 18px;
        border-right: 1px solid #ddd;
        width: 34%;
        text-align: center;
    }

    .width25 {
        width: 25%;
        height: 47px;
        float: left;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        box-sizing: border-box;
    }

    .baoc {
        padding: 8px;
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }

    .wrap1 .tr:hover {
        background-color: #f5f5f5;
    }

    .width20 {
        width: 33%;
        height: 47px;
        float: left;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        box-sizing: border-box;
    }
</style>
